<template>
<div>
  <div class="goods flex">
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li class="menu-item" v-for="(item,index) in goods" :class="{'current':currentIndex===index}" @click="selectMenu(index)">
          <span class=" text">
   					<span class="icon" v-show="item.type>0" :class="classMap[item.type]"></span>
   						<span>{{item.name}}</span>
   					</span>
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper cell-main" ref="foodsWrapper">
      <ul>
        <li class="food-list food-list-hook" v-for="item in goods">
          <h1 class="title">{{item.name}}</h1>
          <ul>
          <div class="underline" v-for="food in item.foods" @click="selectFood(food,$event)">
            <li class="food-item flex" >
              <img :src="food.icon" alt="" class="icon">
              <div class="content cell-main cell-left">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra"><span >月售{{food.sellCount}}份</span>&nbsp;<span>好评率{{food.rating}}</span></div>
                <div class="price"><span class="now">￥{{food.price}}</span><s class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</s></div>
             <div class="cartcontrol-wrapper">
             	<cartcontrol  @add="addFood" :food="food" ></cartcontrol>	
             </div>
              </div>
            </li>
            </div>
          </ul>
        </li>
      </ul>
    </div>
<shopcart ref="shopcart" :select-foods="selectFoods" :min-price="seller.minPrice" :delivery-price="seller.deliveryPrice"></shopcart>
  </div>
  <food @add="addFood" :food="selectedFood" ref="food"></food>
  </div>
</template>
<script type="ecmascript-6">
import BScroll from 'better-scroll';
import shopcart from '../shopcart/shopcart';
import cartcontrol from '../cartcontrol/cartcontrol'
import food from '../food/food';
const ERR_OK=0;
  export default{ 
  	props:{
  		seller:{
  			type:Object
  		}
  	},
  data(){ return{
  	 goods: [],
  	 listHeight:[],
  	 scrollY:0,
  	 selectedFood:{},
  	classMap:['decrease', 'discount', 'special', 'invoice', 'guarantee'],
  } }, 
  computed:{
  	currentIndex(){
  		for(let i=0; i<this.listHeight.length;i++){
  			let height1=this.listHeight[i];
  			let height2=this.listHeight[i+1];
  			if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
  				return i;
  			}
  		}
  		return 0;
  	},
    selectFoods(){
      let foods=[];
      this.goods.forEach((good)=>{
        good.foods.forEach((food)=>{
          if(food.count){
            foods.push(food);
          }
        });
      });
      return foods;
    }
  },
  created(){
  	this.$http.get('/api/goods').then((response)=>{
  		if(response.data.errno===ERR_OK){
  			this.goods=response.data.data;
  			this.$nextTick(()=>{
  				this._initScroll();
  				this._calculateHeight();
  			})
  		}
  	})
  },
  methods:{
  	_initScroll() {
        this.meunScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        });

        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
          click: true,
          probeType: 3
        });

        this.foodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y))+100;
        });
      },
  	_calculateHeight(){
  	let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
  	let height=0;
  	this.listHeight.push(height);
  	for(let i=0;i<foodList.length;i++){
  		let item=foodList[i];
  		height+=item.clientHeight;
  		this.listHeight.push(height);
  	}
  },
  selectMenu(index){
  	let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
  	let el=foodList[index];
  	this.foodsScroll.scrollToElement(el,300);
  },
  _drop(target){
 this.$nextTick(() => {
          this.$refs.shopcart.drop(target);
  });
  },
  addFood(target){
    this._drop(target);
  },
  selectFood(food,event){
    this.selectedFood=food;
    this.$refs.food.show();
  }
  },
  components:{shopcart,cartcontrol,food}, 
}
</script>
<style rel="stylesheet" lang="less">
.goods{
	position: absolute;
	top: 8.85rem;
	bottom: 2.3rem;
	width: 100%;
	overflow: hidden;
	.menu-wrapper{
		flex:0 0 4.0rem;
		width: 4.0rem;
		background-color: #f3f5f7;
		.menu-item{
	display: table;
	height: 2.5rem;
	width: 3rem;
	padding: 0 10px;
	line-height: 0.7rem;
	}
	.current{
		position: relative;
		z-index: 10;
		margin-top: -0.05rem;
		background-color: #fff;
		font-weight: 700;
	}
	.text{
		display: table-cell;
		width: 2.8rem;
		vertical-align: middle;
		position: relative;
		font-size: 12px;
	}
	.icon{
		display: inline-block;
		vertical-align: top;
		width: 0.6rem;
		height: 0.6rem;
		margin-right: 0.05rem;
		background-size: 0.6rem 0.6rem;
		background-repeat: no-repeat;
	}
	}
	.foods-wrapper{
		.title{
			padding-left: 0.7rem;
			line-height: 1.3rem;
			border-left: 0.1rem solid #d9dde1;
			font-size: 12px;
			color: #999;
			background-color: #f3f5f7;
		}
		.food-item{
			position: relative;
			margin: 0.6rem 0.7rem ;
		}
		.icon{
			width: 2.85rem;
			height: 2.85rem;
		}
		.name{
			margin: 0.1rem 0 0.4rem;
			line-height: 0.7rem;
			font-size: 14px;
			color: #07111b;
		}
		.desc{
			font-size: 10px;
			margin-bottom: 8px;
			line-height: 0.6rem;
			color: #93999f;
		}
		.extra{
			line-height: 0.5rem;
			font-size: 0.5rem;
			color: #93999f;
		}
		.price{
			font-weight: 700;
			line-height: 1.2rem;
		}
		.now{
			margin-right: 0.4rem;
			font-size: 14px;
			color: #f01414;
		}
		.old{
			font-size: 10px;
			color: #93999f;
		}
		.cartcontrol-wrapper{
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}
}
.decrease{
  background: url('./reduce.png');background-size: 100% 100%;
}
.discount{
  background: url('./discount.png');background-size: 100% 100%; 
}
.special{
 background: url('./special.png');background-size: 100% 100%;  
}
.invoice{
  background: url('./piao.png');background-size: 100% 100%;  
}
.guarantee{
   background: url('./promise.png');background-size: 100% 100%;  
}

</style>
